<script setup lang="ts">
import { formatDate } from "@/util/index";

import { ref, computed, watch, reactive, onMounted, onBeforeMount } from "vue";
import Calendar from "./components/calendar/Calendar.vue";

let curDate = ref(new Date());
let mondayFirst = ref(true); //周一是否为第一列,否则为周日为第一列
const changeWeekFirst = (e: Event) => {
  mondayFirst.value = (e.target as HTMLInputElement).checked;
};

const changeDate = (val: Date) => {
  curDate.value = val;
};
</script>

<template>
  <div class="wrapper">
    <div>
      <h3>{{ formatDate(curDate, "YYYY年MM月DD日") }}</h3>
    </div>
    <input
      type="checkbox"
      :checked="mondayFirst"
      @change="changeWeekFirst"
    />周一为第一列
    <Calendar :mondayFirst="mondayFirst" @change="changeDate" />
  </div>
</template>

<style scoped>
.wrapper {
  margin: 40px;
}
</style>
